<template>
  <i
    class="vk-icon"
    :class="{ [`vk-icon--${type}`]: type }"
    :style="customStyles"
    v-bind="$attrs"
  >
    <font-awesome-icon v-bind="filterProps"></font-awesome-icon>
  </i>
</template>

<script setup lang="ts">
import { omit } from "lodash-es";
import type { IconProps } from "./types";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { defineOptions, defineProps, computed } from "vue";
defineOptions({
  name: "VkIcon",
  inheritAttrs: false, // 设置不透传
});

const props = defineProps<IconProps>();
// 把 "type", "color" 这两个属性过滤掉
const filterProps = computed(() => omit(props, ["type", "color"]));

const customStyles = computed(() => {
  return props.color ? { color: props.color } : {};
});
</script>

<style scoped></style>
